<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-26 19:45:39
 * @LastEditors: oooh
 * @LastEditTime: 2024-10-10 14:45:13
 * @FilePath: \Civil_Servant_Performance_PC\src\views\performance-inventory\civil\negative-list.vue
-->
<template>
  <div class="component-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item
        label="负面评价类型"
        label-width="auto"
        prop="matterTypeDict"
      >
        <el-select
          v-model="queryParams.matterTypeDict"
          placeholder="选择负面评价类型"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.biz_personal_punishment_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="flex-table">
      <el-table
        :data="negativeList"
        border
        height="100%"
        v-loading="negativeLoading"
      >
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="负面评价类型"
          prop="matterTypeDict"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.biz_personal_punishment_type"
              :value="scope.row.matterTypeDict"
            ></dict-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="负面产生日期"
          prop="matterDate"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="说明描述"
          prop="content"
          min-width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column label="扣分" prop="score" width="80" align="center">
        </el-table-column>
        <el-table-column
          label="受影响站办所"
          prop="sufferDeptName"
          min-width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          label="负面评价对象"
          prop="sufferCivilServantName"
          min-width="180"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column label="提供站办所" prop="provideDeptName" min-width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.provideDeptName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提供人" prop="provideCivilServantName" min-width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.provideCivilServantName || '-' }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          label="依据材料"
          align="center"
          prop="materialUrls"
          min-width="120"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.materialUrls">
              <el-tooltip
                v-for="(url, index) in scope.row.materialUrls.split(',')"
                :key="index"
                effect="dark"
                :content="formatFileUrl(url)['name']"
                placement="top-start"
              >
                <el-button
                  type="text"
                  @click="handlePreviewFile(url)"
                  class="file-preview-btn"
                >
                  {{ formatFileUrl(url)["name"] }}
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="填报日期"
          prop="materialProvisionDate"
          width="160"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="negativeTotal > 0"
      :total="negativeTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <FilePreview
      :visible.sync="filePreviewVisible"
      :file="previewFile"
    ></FilePreview>
  </div>
</template>

<script>
import { list } from "@/api/work-approval/negative/civil";
import FilePreview from "@/components/FilePreview";
import { mixins } from "@/mixins";
export default {
  name: "negative-dept",
  mixins: [mixins],
  dicts: ["biz_personal_punishment_type"],
  props: {
    queryForm: {
      type: Object,
      default: () => {},
    },
  },
  components: { FilePreview },
  data() {
    return {
      filePreviewVisible: false,
      previewFile: {},
      negativeLoading: false,
      negativeList: [],
      negativeTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        matterTypeDict: "",
      },
    };
  },
  watch: {
    queryForm: {
      deep: true,
      immediate: true,
      handler(query) {
        this.queryParams = { ...this.queryParams, ...query };
        this.getList();
      },
    },
  },
  methods: {
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url);
      this.previewFile = { url, ...fileItem };
      this.filePreviewVisible = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.handleQuery();
    },
    getList() {
      this.negativeLoading = true;
      list(this.queryParams)
        .then((res) => {
          this.negativeLoading = false;
          this.negativeTotal = res.total || 0;
          this.negativeList = res.data;
        })
        .catch((err) => {
          this.negativeLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.file-preview-btn {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  padding: 0;
}
</style>
